<!--这是试卷添加编辑组件-->
<template>
  <div class="app-container">
    <el-form :model="postForm" v-loading="formLoading" :rules="rules" ref="postForm" label-width="220px"
             label-position="right">
      <el-form-item label="试卷名称：" class="islabel" prop="name">
        <el-input :maxlength=26 v-model="postForm.name" placeholder="请输入内容" style="width: 650px"></el-input>
      </el-form-item>
      <!--如果是从编辑页进去的，则所属专题不需要呈现-->
      <el-form-item label="所属专题：" v-show="isShowTopic">
        <el-select v-model="topicId" placeholder="请选择" style="width: 650px">
          <el-option v-for="item in topicOptions" :key="item.topicId" :label="item.name"
                     :value="item.topicId"></el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="单选题数量：" prop="singleChoiceNum">
        <el-input min="0" type="number"  v-model="postForm.singleChoiceNum" placeholder="请输入内容" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="多选题数量：" prop="multipleChoiceNum">
        <el-input min="0" type="number" v-model="postForm.multipleChoiceNum" placeholder="请输入内容" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input min="0" type="number" v-model="postForm.sort" placeholder="请输入排序" style="width: 650px"></el-input>
      </el-form-item>
      <!--<el-form-item label="考试结果展现形式：">-->
      <!--<el-select v-model="postForm.scoringMethod" placeholder="请选择" style="width: 650px" @change="showResultSelect">-->
      <!--<el-option v-for="item in showResultOptions" :key="item.key" :label="item.value" :value="item.key"></el-option>-->
      <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="考试结果展现形式:">
        <el-radio-group v-model="postForm.scoringMethod">
          <el-radio :label="1">正确率</el-radio>
          <el-radio :label="2">总分</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="单选题分数：" v-show="postForm.scoringMethod == 2">
        <el-input  min="0" type="number" v-model="postForm.singleChoiceScore" placeholder="请输入内容" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="多选题分数：" v-show="postForm.scoringMethod == 2">
        <el-input min="0" type="number" v-model="postForm.multipleChoiceScore" placeholder="请输入内容" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="评语设置：">
        <el-select v-model="postForm.isRemark" placeholder="请选择" style="width: 650px" @change="reviewsSelect">
          <el-option v-for="item in reviewsOptions" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统一评语：" v-show="isUnity">
        <el-input style="width: 650px"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入统一评语"
                  v-model="postForm.unfiedRemark">
        </el-input>
      </el-form-item>
      <el-form-item label="正确率60%以下：" v-show="isReviews">
        <el-input style="width: 650px"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入正确率60%以下的评语"
                  v-model="postForm.lessThanSix">
        </el-input>
      </el-form-item>
      <el-form-item label="正确率60%-80%：" v-show="isReviews">
        <el-input style="width: 650px"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入正确率60%-80%的评语"
                  v-model="postForm.sixAndEight">
        </el-input>
      </el-form-item>
      <el-form-item label="正确率80%-90%：" v-show="isReviews">
        <el-input style="width: 650px"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入正确率80%-90%的评语"
                  v-model="postForm.eightAndnine">
        </el-input>
      </el-form-item>
      <el-form-item label="正确率90%以上：" v-show="isReviews">
        <el-input style="width: 650px"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入正确率90%以上的评语"
                  v-model="postForm.moreThanNine">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { toGetPaperInfo, paperEditSave, toGetTopicList } from '@/api/paper'
  var oldSingleNum = 0 // 针对编辑 判断重新编辑的题数必须大于旧题数
  var oldMuiltiNum = 0
  var postForm = {
    paperMainId: '',
    name: '', // 名称
    singleChoiceNum: 0, // 单选题数
    multipleChoiceNum: 0, // 多选题数
    singleChoiceScore: 0, // 单选题分数
    multipleChoiceScore: 0, // 多选题分数
    sort: 0, // 排序
    scoringMethod: 2, // 考试结果展现形式
    isRemark: -1, // 评语设置(无评语/统一评语/以正确率)
    unfiedRemark: '', // 统一评语
    lessThanSix: '', // 正确率60以下评语
    sixAndEight: '', // 正确率60-80评语
    eightAndnine: '', // 正确率80-90评语
    moreThanNine: '' // 正确率90以上评语
  }
  const showResultOptions = [
    { key: 1, value: '正确率' },
    { key: 2, value: '总分' }
  ]
  const reviewsOptions = [
    { key: -1, value: '无评语' },
    { key: 1, value: '统一评语' },
    { key: 2, value: '以正确率分段评语' }
  ]

  const rules = {
    name: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
    singleChoiceNum: [{ required: true, message: '请输入单选题数量', trigger: 'blur' }],
    multipleChoiceNum: [{ required: true, message: '请输入多选题数量', trigger: 'blur' }]
  }

  export default {
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        postForm: Object.assign({}, postForm),
        rules,
        reviewsOptions,
        showResultOptions,
        formLoading: false,
        btnLoading: false,
        isShowFraction: false, // 是否显示分数
        isUnity: false, // 是否显示统一评语
        isReviews: false, // 是否是以正确率的评语
        paperId: null,
        topicId: null,
        topicOptions: [], // 专题列表
        isShowTopic: true
      }
    },
    created() {
      this.topicId = this.$route.params.topicId
      if (this.topicId) {
        this.isShowTopic = false
      }
      if (this.$route.params.paperId) { // 编辑时获取数据
        this.paperId = this.$route.params.paperId
        this.getPaperInfo()
      }
      this.getTopicList()
    },
    watch: {
      // 监听路由名称变化 重新调用数据
      $route: function(to, from) {
        if (to.name == 'editPaper') {
          if (this.$route.params.paperId) { // 编辑时获取数据
            this.paperId = this.$route.params.paperId
            this.getPaperInfo()
          }
          this.getTopicList()
        }
      }
    },
    methods: {
      getPaperInfo() {
        toGetPaperInfo(this.paperId).then(res => {
          // 正确回调
          this.postForm = res.data.data
          oldSingleNum = this.postForm.singleChoiceNum
          oldMuiltiNum = this.postForm.multipleChoiceNum
          if (this.postForm.isRemark == 2) {
            this.isReviews = true
          }
          if (this.postForm.isRemark == 1) {
            this.isUnity = true
          }
          if (this.postForm.scoringMethod == 2) {
            this.isShowFraction = true
          }
        })
          .catch(err => {
            console.log(err)
          })
      },
      getTopicList() {
        toGetTopicList(this.paperId).then(res => {
          // 正确回调
          this.topicOptions = res.data.data
        })
          .catch(err => {
            console.log(err)
          })
      },
      showResultSelect(val) {
        console.log(val)
        if (val === 2) {
          this.isShowFraction = true
        } else {
          this.isShowFraction = false
        }
      },
      reviewsSelect(val) {
        if (val === 1) {
          this.isUnity = true
          this.isReviews = false
        } else if (val === 2) {
          this.isReviews = true
          this.isUnity = false
        } else {
          this.isUnity = false
          this.isReviews = false
        }
      },
      cancel() {
        this.close()
      },
      submitForm() {
        if (this.postForm.name == '' ||　this.postForm.name.length == 0) {
          this.$alert('名称不能为空！', '警告', {
            confirmButtonText: '确定'
          })
          return
        } else {
          if (this.postForm.length > 26) {
            this.$alert('名称长度不能超过26个字符！', '警告', {
              confirmButtonText: '确定'
            })
            return
          }
        }
        if (this.postForm.sort < 0) {
          this.$alert('排序不能小于0！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }

        if (this.postForm.singleChoiceNum > 500 || this.postForm.multipleChoiceNum > 500) {
          this.$alert('单选题数目或多选题数量不能超过500！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }

        if (this.postForm.singleChoiceNum < 0) {
          this.$alert('单选题数目必须大于或等于0！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }
        if (this.postForm.multipleChoiceNum < 0) {
          this.$alert('多选题数目必须大于或等于0！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }
        console.log('sdsdadad', this.postForm)
        if (this.postForm.scoringMethod == 2) {
          if (this.postForm.singleChoiceNum) {
            if (this.postForm.singleChoiceScore <= 0) {
              this.$alert('单选题分数不能为空！', '警告', {
                confirmButtonText: '确定'
              })
              return
            }
          }
          if (this.postForm.multipleChoiceNum) {
            if (this.postForm.multipleChoiceScore <= 0) {
              this.$alert('多选题分数不能为空！', '警告', {
                confirmButtonText: '确定'
              })
              return
            }
          }
        }
        if (!this.postForm.paperMainId) {
          oldSingleNum = 0
          oldMuiltiNum = 0
        }

        if (oldSingleNum > 0 && oldSingleNum > this.postForm.singleChoiceNum) {
          this.$alert('重新设置单选题数必须大于已经存在的题数！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }
        if (oldMuiltiNum > 0 && oldMuiltiNum > this.postForm.multipleChoiceNum) {
          this.$alert('重新设置多选题数必须大于已经存在的题数！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }
        // singleChoiceNum  multipleChoiceNum
        var hasNum = this.postForm.singleChoiceNum + this.postForm.multipleChoiceNum
        if (hasNum == 0) {
          this.$alert('题数至少设置1道题！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }
        if (oldSingleNum > 0 && oldSingleNum > this.postForm.singleChoiceNum) {
          this.$alert('重新设置单选题数必须大于已经存在的题数！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }
        if (oldMuiltiNum > 0 && oldMuiltiNum > this.postForm.multipleChoiceNum) {
          this.$alert('重新设置多选题数必须大于已经存在的题数！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }

        // 提交表单
        if (this.btnLoading) {
          return
        }
        this.btnLoading = true
        this.formLoading = true
        var data = { paperArr: this.postForm, topicId: this.topicId, oldTopicId: this.$route.params.topicId }
        paperEditSave(data)
          .then(res => {
            this.btnLoading = false
            this.formLoading = false
            if (res.data.data.paperMainId) {
              this.postForm.paperMainId = res.data.data.paperMainId
            }
            this.$message({
              type: 'success',
              message: ' 保存成功! '
            })
            this.close()
          })
          .catch(err => {
            this.btnLoading = false
            this.formLoading = false
            console.log(err)
          })
      },
      //    close() {
      //      this.$store.dispatch('delVisitedViews', this.$route).then((views) => {
      //        const latestView = views.slice(-1)[0]
      //        console.log(latestView)
      //        if (latestView) {
      //          this.$router.push(latestView.path)
      //        } else {
      //          this.$router.push('/')
      //        }
      //      })
      //    }
      close() {
        this.$store.dispatch('delVisitedViews', this.$route).then((views) => {
          const latestView = views.slice(-1)[0]
          if (latestView) {
            const activeName = localStorage.getItem('testBar')
            console.log(latestView)
            if (activeName == 'second') {
              this.$router.push({ name: 'topics', params: { activeName: activeName }})
            }
            if (activeName == 'first') {
              this.$router.push({ path: `/testManage/paperDetail/${this.$route.params.topicId}` })
            }
          } else {
            this.$router.push('/')
          }
        })
      }
    }
  }
</script>
<style scoped>
  el-form .islabel label {
    color: red;
  }
</style>
